<template>
  <div class="app-container">

    <div class="filter-container">
      <el-select
        v-model="valueAccountName"
        class="filter-item"
        clearable
        placeholder="account_name"
      >
        <el-option
          v-for="item in account_names"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
      >search
      </el-button>

    </div>
    <my-table
      :grid-table-header="tableHeard"
      :table-data="tableData"
      :clikc-cell="clickCell"
      @rowClick="rowclik"
      @cellOnClick="cellClik"
    />
  </div>
</template>

<script>
import myTable from '@/components/Tables/index.vue'
import { api_account_names, pnleod_account_detail_date } from '@/api/pnl_analysis'

export default {
  components: { myTable },
  data() {
    return {
      account_names: [],
      clickCell: ['symbol'],
      valueAccountName: '',
      tableData: [],
      tableData2: [],
      tableHeard: {}
    }
  },
  mounted() {
    this.valueAccountName = this.$route.params.account
    this.get_account_names()
    this.pnleod_account_detail_date()
  },
  methods: {
    get_account_names() {
      api_account_names()
        .then((response) => {
          console.log(response.data)
          this.account_names = response.data
        })
        .catch((e) => {
          console.log(e)
        })
    },
    pnleod_account_detail_date() {
      pnleod_account_detail_date()
        .then((response) => {
          const arr = response.data.map((v) => {
            return JSON.parse(v)
          })

          this.tableData = arr
          const obj = arr[0]
          for (let v in obj) {
            this.tableHeard[v] = v
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    rowclik(row) {
      // console.log(' rowClikc---callback----')
      // console.log(row)
      // console.log(row.name)
      // console.log('跳转')
      // this.$router.push({ name: 'summer', params: { account: '思达22号' }})
    },
    cellClik(row, column, cell, event) {
      this.$router.push({ name: 'single_account', params: { symbol: row[column.property] } })
    }
  }
}
</script>

<style scoped>

</style>
